<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center">
                        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
                            {{ route.query.id ? '物料编辑' : '物料新增' }}
                        </span>
                        <el-tag v-if="route.query.code" :type="tagType" style="margin-left: 10px;">{{ route.query.code
                            }}</el-tag>
                    </div>
                </template>

                <template #extra>
                    <div>
                        <el-button v-if="!readonly" class="button" type="primary" @click="handleSubmit"> 保 存
                        </el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form :model="form" :rules="rules" :disabled="Boolean(readonly)" ref="accessoryRef"
                            label-width="135px">
                            <el-row :gutter="20">
                                <!-- <el-col :span="8">
                                    <el-form-item label="自有编码" prop="originalCode">
                                        <el-input v-model="form.originalCode" placeholder="请输入" maxlength="30" />
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="8">
                                    <el-form-item label="物料名称" prop="name">
                                        <el-input v-model="form.name" @blur="handleSplice" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="规格型号">
                                        <el-input v-model="form.specs" placeholder="请输入" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="实时单价">
                                        <el-input v-model="form.realtimePrice" type="number" placeholder="请输入"
                                                  maxlength="30" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="物料全称">
                                        <el-input v-model="form.fullName" disabled placeholder="请输入" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="物料品牌">
                                        <el-select v-model="form.brand" clearable class="m-2" placeholder="请选择物料品牌"
                                            style="width: 100%;">
                                            <el-option v-for="item in mes_material_brand" :key="item.label"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="计量单位" prop="unit">
                                        <el-select v-model="form.unit" class="m-2" clearable placeholder="请选择计量单位"
                                            style="width: 100%;">
                                            <el-option v-for="item in mes_material_unit" :key="item.label"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="采购专员编码">
                                        <el-input v-model="form.buyerCode" @click="() => { searchVisible = true }"
                                            placeholder="请输入" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="采购专员">
                                        <el-input v-model="form.buyerName" disabled placeholder="选择采购专员编码 自动带出"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属分类">
                                        <el-input v-model="form.belongClassName" disabled placeholder="请输入所属分类"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="定量">
                                        <el-input v-model="form.weight" type="number" placeholder="请输入"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="长度">
                                        <el-input v-model="form.longWide" type="number" placeholder="请输入"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="宽度(mm)">
                                        <el-input v-model="form.wide" type="number" placeholder="请输入" maxlength="18" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="高度(mm)">
                                        <el-input v-model="form.height" type="number" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属仓库">
                                        <el-input v-model="form.store" disabled placeholder="请输入" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="期初库存">
                                        <el-input v-model="form.originalStock" type="number" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>

                                <!--  <el-col :span="8">
                                    <el-form-item label="加权单价">
                                        <el-input v-model="form.authorityPrice" type="number" placeholder="请输入"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col> -->

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="库存数量">
                                        <el-input v-model="form.quantity"  disabled type="number" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="库存金额">
                                        <el-input v-model="form.stockPrice" type="number" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="安全库存">
                                        <el-input v-model="form.safetyStock" type="number" placeholder="请输入"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="最低库存">
                                        <el-input v-model="form.minStock" type="number" placeholder="请输入"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="最高库存">
                                        <el-input v-model="form.maxStock" type="number" placeholder="请输入"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>

                </el-collapse-item>
            </el-collapse>
        </el-card>
        <SearchPeople :visible="searchVisible" @changeUpdate="changePeopleData"
            @cancel="() => { searchVisible = false }">
        </SearchPeople>

    </div>
</template>

<script setup>
import { computed } from 'vue';
import useTagsViewStore from '@/store/modules/tagsView'
const tagsViewStore = useTagsViewStore()
import SearchPeople from '@/components/SearchPeople'
import { getMaterial, addMaterial, updateMaterial } from '@/api/basicInfo/accessory.js'
const { proxy } = getCurrentInstance();
const { mes_material_brand, mes_material_unit, sys_normal_disable, mes_material_specs } = proxy.useDict('mes_material_brand', 'mes_material_unit', 'sys_normal_disable', 'mes_material_specs');
const router = useRouter();
const route = useRoute();
const readonly = ref(false)
const activeNames = ['1']
const accessoryRef = ref(null)
const searchVisible = ref(false)
import { ElMessage, ElMessageBox } from 'element-plus'
const data = reactive({
    form: {},
    rules: {
        // originalCode: [{ required: true, message: "自有编码不能为空", trigger: "blur" }],
        name: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
        specs: [{ required: true, message: "请选择规格型号", trigger: "blur" }],

        brand: [{ required: true, message: "请选择物料品牌", trigger: ["blur", "change"] }],
        unit: [{ required: false, message: "请选择物料单位", trigger: "blur" }],
        weight: [{ required: true, message: "定量不能为空", trigger: ["blur", "change"] }],
        wide: [{ required: true, message: "宽度不能为空", trigger: "blur" }],
        longWide: [{ required: true, message: "长度不能为空", trigger: ["blur", "change"] }],
    }
});
const { form, rules } = toRefs(data);
const tagType = computed(() => {
    return route.query.status == 0 ? '' : 'danger';
});
readonly.value = route.query.readonly
if (route.query.id) {
    getMaterial(route.query.id).then(response => {
        form.value = response.data
        form.value.brand = form.value.brand ? response.data.brand + '' : undefined
        form.value.specs = form.value.specs ? response.data.specs + '' : undefined
        form.value.unit = form.value.unit ? response.data.unit + '' : undefined

    })
} else {
    form.value.belongClassName = route.query.MaterialName
    form.value.belongClass = route.query.MaterialCode
    form.value.store = '物料库'
}

const handleSplice = () => {
    form.value.fullName = `${form.value.belongClassName} - ${form.value.name}`
}
// 选中的供应商
const changePeopleData = (row) => {
    form.value.buyerCode = row.code
    form.value.buyerName = row.name
    searchVisible.value = false
}
//  返回
const goBack = () => {
    tagsViewStore.delView(route)
    //router.push('/basicInfo/accessory')
    if(route.query.moduleCode=="searchMaterialReceipt"){
        router.push('/storage/searchMaterialReceipt') //物料入库明细
    }else if(route.query.moduleCode=="searchMaterialRequisition"){
        router.push('/storage/searchMaterialRequisition')//物料领用明细
    }else if(route.query.moduleCode=="searchReturnSlip"){
        router.push('/storage/searchReturnSlip')//退库单明细
    }else if(route.query.moduleCode=="searchReturnNote"){
        router.push('/storage/searchReturnNote')//退货单明细
    }else if(route.query.moduleCode=="searchMaterialInventorySheet"){
        router.push('/storage/searchMaterialInventorySheet')//盘点明细
    }
    else{
        router.push('/basicInfo/accessory')
    }
}
const handleSubmit = () => {
    accessoryRef.value.validate((valid) => {
        if (valid) {
            const formData = form.value;
            if (formData.id) {
                updateMaterial(formData).then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '编辑成功',
                            type: 'success',
                        });
                        goBack();
                    }
                })
            } else {
                formData.belongClass = route.query.MaterialCode
                formData.status = 0
                addMaterial(formData).then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        });
                        goBack();
                    }
                })
            }
        }
    });
}
</script>

<style lang="scss" scoped></style>